<template>
  <!-- 计量设备管理 -->
  <div class="meter-device-box">
    <div class="CardItems-box">
      <CardItems
        ref="deviceCardItemsRef"
        :outer-params="outerParams"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
        :dynamic-select-list="selectList"
        @selectChange="selectChange"
      />
    </div>
  </div>
</template>

<script>
import CardItems from '@/components/CardItems'
import { cardConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { headerConfig } from './config/tableConfig'
import { selectConfig } from './config/selectConfig'
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'

export default {
  name: 'MeterDevice',
  components: {
    CardItems
  },
  data() {
    return {
      outerParams: {
        warning_type: 1
      },
      selectList: selectConfig['meter-device']
    }
  },
  computed: {
    /**
     * 卡片配置
     */
    cardConfig() {
      return cardConfig['meter-device'] || {}
    },
    /**
     * 弹窗配置
     */
    popConfig() {
      return popConfig['meter-device'] || {}
    },
    /**
     * 筛选配置
     */
    selectConfig() {
      return this.selectList || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig['meter-device'] || []
    }
  },
  created() {
    // console.log(this.$route.query)
    const param = this.$route.query
    this.outerParams = {
      ...this.outerParams, ...param
    }
    this.selectChange({ ...param }, 'sceneProjectId', this.selectList)
  },
  methods: {
    /**
     * @param selectData   回传表单的选择数据
     * @param prop        事件触发的表单字段
     * @param selectList  回传的表单配置项
     */
    selectChange(selectData, prop, selectList) {
      if (prop === 'sceneProjectId') {
        this.getRoomList(selectData[prop], selectList, selectData)
      }
      if (prop === 'sceneInfo') {
        const infos = selectData[prop]
        if (infos && infos.length > 0) {
          selectData.sceneEdificeId = infos[0] || undefined
          selectData.sceneFloorId = infos[1] || undefined
          selectData.sceneRoomId = infos[2] || undefined
        }
      }
    },
    /**
     * 获取空间列表
     * @param sceneProjectId
     */
    async getRoomList(sceneProjectId, selectList, selectData) {
      this.selectList = JSON.parse(JSON.stringify(selectList))
      const res = await api.queryRoomList({
        sceneProjectId,
        sortColumn: 'floorName',
        sortOrder: 'asc'
      })
      const roomList = parseSceneData(res.data)
      const configItem = selectList[2]
      configItem.optionList = roomList
      this.$set(this.selectList, 2, {
        ...configItem
      })
      this.$refs.deviceCardItemsRef.setSelectModuleValue({
        ...selectData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.meter-device-box {
  display: flex;
  width: 100%;
  height: 100%;

  .CardItems-box {
    flex: 1;
  }
}
</style>
